import { PageContainer } from '@ant-design/pro-layout';
import { Drawer, message, Popconfirm, Upload} from 'antd';
import ProTable, { ActionType } from '@ant-design/pro-table';
import React, { useState} from 'react';
import type { ProColumns } from '@ant-design/pro-table';
import { useRef } from 'react';
import { Button } from 'antd';
import {exportFile} from '@/utils/utils';
import ProForm, { DrawerForm, ModalForm, ProFormText } from '@ant-design/pro-form';
import { PlusOutlined } from '@ant-design/icons';

export default () => {
  const [dataList,setDataList] = useState<any>([{}]);
  const [currentRecord,setCurrentRecord] = useState({});
  const [showDetail, setShowDetail] = useState(false);
  const actionRef = useRef<ActionType>();
  const [services,setServices] = useState<any>([{account:'test',phone:'18796852361',name:'上海温纶商务咨询事务所',id:1,flag:"1"},{account:'test',phone:'18796852361',id:2,name:'合肥艾苓贸易有限公司',flag:"0"}]);
  const [showService, setShowService] = useState(false);
  const [modalVisible,setModalVisible] = useState(false);
  const [fileList1,setFileList1] = useState<any>([]);
  const [fileList2,setFileList2] = useState<any>([]);
  const sColumn: ProColumns[] = [
    {
      title:'名称',
      dataIndex: 'name',
    },
    {
      title:'联系人',
      dataIndex: 'account',
    },
    {
      title:'电话',
      dataIndex: 'phone',
    },
    {
      title: '创建时间',
      dataIndex: 'date',
      hideInSearch:true,
      renderText:(text:string)=>"2022-07-25"
    },
    {
      title: '更新时间',
      dataIndex: 'date',
      hideInSearch:true,
      renderText:(text:string)=>"2022-07-25"
    },
    // {
    //   title:'营业执照',
    //   valueType:'image',
    //   dataIndex: 'img1',
    // },
    // {
    //   title:'收款账户凭证',
    //   valueType:'image',
    //   dataIndex: 'img1',
    // },
    {
      title: "操作",
      valueType: 'option',
      width:100,
      render: (text, record:any,_, action) => [
        <Popconfirm title='确定要删除吗?' key='delete' onConfirm={() => {}}><a hidden={showDetail}>删除</a></Popconfirm>,
        <a key="select" hidden={!showDetail} onClick={()=>setShowService(false)}>选择</a>
      ]
    }
  ]

  const columnService: ProColumns[] = [
    {
      title:'名称',
      dataIndex: 'name',
    },
    {
      title: '更新时间',
      dataIndex: 'date',
      hideInSearch:true,
      renderText:(text:string)=>"2022-07-25"
    },
    {
      title: '当前服务商',
      dataIndex: 'flag',
      width:100,
      hideInSearch:true,
      renderText:(text:string)=>text=='1'?'是':'否'
    },
    {
      title: "操作",
      valueType: 'option',
      width:260,
      render: (text, record:any,_, action) => [
      //   <a
      //   key="detail"
      //   onClick={async() => {
      //       setShowDetail(true);
      //   }}
      // >
      //   详情
      // </a>,
       <a
       key="detail2" hidden={record.flag=="1"}
       onClick={async() => {
           setShowDetail(true);
       }}
     >
       设定当前服务商
     </a>,
     <Popconfirm title='确定要删除吗?' key='delete' onConfirm={() => {}}><a hidden={record.flag=="1"}>删除</a></Popconfirm>

    ]
    }
  ]
  //表头信息以及表值设置
  const columns: ProColumns[] = [
    {
      title:'客户代码',
      dataIndex: 'loginName',
      renderText:()=>"JXS4252"
    },
    
    {
      title:'客户名称',
      dataIndex: 'dealerName',
      renderText:()=>"安徽卉竹生物科技有限公司"
    },
    {
      title:'地区',
      dataIndex: 'area',
      hideInSearch:true,
      renderText:()=>"湖北省/武汉市"
    },
    {
      title: '创建时间',
      dataIndex: 'date',
      hideInSearch:true,
      renderText:(text:string)=>"2022-07-25"
    },
    {
      title: '更新时间',
      dataIndex: 'date',
      hideInSearch:true,
      renderText:(text:string)=>"2022-07-25"
    },
    {
      title: '当前服务商',
      dataIndex: 'service',
      hideInSearch:true,
      renderText:(text:string)=>"合肥艾苓贸易有限公司"
    }
    ,{
      title: '服务商',
      dataIndex: 'service',
      width: 100,
      valueType:'select',
      hideInTable:true,
      valueEnum:{
        "1":{text:'有'},
        '0':{text:'无'}
      },
    },
    {
      title: "操作",
      valueType: 'option',
      render: (text, record:any,_, action) => [
        <a
        key="detail"
        onClick={async() => {
            setShowDetail(true);
        }}
      >
        详情
      </a>
    ]
    }
  ];
  

  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>点击上传</div>
    </div>
  );
  
  return (
    <PageContainer>
    <ProTable
      headerTitle='客户列表'
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      actionRef={actionRef}
      scroll={{x:1200}}
      dataSource = {dataList}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolBarRender={()=>[
        <Button type='primary' key='primary' onClick={() => {
          setShowService(true)
        }}>服务商</Button>
      ]}
      toolbar={{settings:[]}}
      />
      <Drawer style={{zIndex:90}} title='详情' width={1200} onClose={()=>setShowDetail(false)} visible={showDetail} destroyOnClose={true} forceRender={true}>
          <ProTable pagination={false} search={false}   rowKey="id"   dataSource = {services}
            columns={columnService} toolbar={{settings:[]}} toolBarRender={()=>[
              <Button type='primary' key='primary' onClick={() => {
                setShowService(true)
              }}>选择</Button>
            ]}>

          </ProTable>
       </Drawer>
       <ModalForm style={{zIndex:100}}
        title="服务商"
        width={1000}
        modalProps={{
          forceRender: true,
            destroyOnClose: true,
        }}
        visible={modalVisible}
        onVisibleChange={(val)=>{
          setModalVisible(val)
        }}
        onFinish={async(value)=>{
          return true;
        }}
      >
        <ProForm.Group >
          <ProFormText  name="recv_consignee" label="服务商名称" rules={[{ required: true}]}    width="md"/>
         
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText  name="recv_name" label="联系人" rules={[{ required: true}]}    width="sm"/>
          <ProFormText  name="recv_phone" label="电话" rules={[{ required: true}]}    width="sm"/>
          <ProFormText  name="recv_mail" label="邮箱"   width="sm"/>
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText  name="recv_account" label="收款开户名称"   width="sm"/>
          <ProFormText  name="recv_bank" label="收款开户银行" rules={[{ required: true}]}    width="sm"/>
          <ProFormText  name="recv_card" label="银行账号" rules={[{ required: true}]}    width="sm"/>
        </ProForm.Group>
        <h4>营业执照附件</h4>
        <Upload
             headers={{
            'authorization':`${sessionStorage.getItem('token')}`}} 
            listType="picture-card"
            fileList={fileList1}
            onChange={(info:any)=>{
              if (info.file.status !== 'uploading') {
                // console.log(info.file, info.fileList);
              }
            }}
          >
              {uploadButton}
          </Upload>
          <h4>收款账户凭证</h4>
          <Upload
             headers={{
            'authorization':`${sessionStorage.getItem('token')}`}} 
            listType="picture-card"
            fileList={fileList1}
            onChange={(info:any)=>{
              if (info.file.status !== 'uploading') {
                // console.log(info.file, info.fileList);
              }
            }}
          >
              {uploadButton}
          </Upload>
      </ModalForm>
       <Drawer title='详情' style={{zIndex:99}} width={1200} onClose={()=>setShowService(false)} visible={showService} destroyOnClose={true} forceRender={true}>
          <ProTable pagination={false} search={false}   rowKey="id"   dataSource = {services}
            columns={sColumn} toolbar={{settings:[]}} toolBarRender={()=>[
              <Button type='primary' key='primary' hidden={showDetail} onClick={() => {
                setModalVisible(true)
              }}>新增</Button>
            ]}>

          </ProTable>
       </Drawer>
      
  </PageContainer>
  );
};